<template>
  <view class="menuList">
    <view class="menuItem" v-for="(item, index) in list" :key="index" @click="navTo(item.path)">
      <text>{{ item.text }}</text>
      <uni-icons type="forward" size="20" color="#666666"></uni-icons>
    </view>
  </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/navigator';
import { PropType } from 'vue';

defineProps({
  list: {
    type: Array as PropType<Array<any>>,
    default: () => [],
  },
});
</script>

<style scoped lang="less">
.menuList {
  width: 95%;
  margin: 2.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .menuItem {
    width: 48.6%;
    background-color: white;
    margin-bottom: 2.5%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    height: 130rpx;
    box-sizing: border-box;
    text:nth-of-type(1) {
      width: 70%;
      text-align: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
